<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .box {
        height: 400px;
        width: 600px;
        margin: 150px auto;
        border: 1px solid black;
        position: relative;
    }

    .box>a {
        position: absolute;
        top: 50%;
        width: 120px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        text-decoration: none;
        border-radius: 10px;
    }

    .slides {
        width: 100%;
        height: 100%;

    }

    #preBtn{
        left: -17%;
    }
    #nextBtn{
        right: -17%;
    }

    ul {
        position: relative;
        ;
        width: 20%;
        height: 100%;
        float: left;
        list-style: none;
        transform-style: preserve-3d;



        /* background-color: black; */
    }

    li {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: 600px 400px;
    }

    /* 每一个ul里面的第一个li */

    ul>li:nth-child(1) {
        background-image: url("images/01.jpg");
        transform: translateZ(200px);
    }

    ul>li:nth-child(2) {
        background-image: url("images/02.jpg");
        transform: translateZ(-200px) rotateX(180deg);
    }

    ul>li:nth-child(3) {
        background-image: url("images/03.jpg");
        transform: translateY(200px) rotateX(-90deg);

    }

    ul>li:nth-child(4) {
        background-image: url("images/04.jpg");
        transform: translateY(-200px) rotateX(90deg);

    }

    /* 第一个ul里面的每一个li */

    ul:nth-child(2)>li {
        background-position: -120px 0;
    }

    ul:nth-child(3)>li {
        background-position: -240px 0;
    }

    ul:nth-child(4)>li {
        background-position: -360px 0;
    }

    ul:nth-child(5)>li {
        background-position: -480px 0;
    }
</style>

<body>
    <div class="box">
        <!-- 轮播图 -->
        <div class="slides">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <a id="preBtn" href="javascript:;">上一页</a>
        <a id="nextBtn" href="javascript:;">下一页</a>
    </div>

    <script>
        var de = 0;
        var ad = false;
        var btnl = document.querySelector("#preBtn");
        var btnr = document.querySelector("#nextBtn");
        var uls = document.querySelectorAll("ul");



        btnl.onclick = function () {
            if (ad) {
                return;
            }
            ad = true;
            de += 90;
            for (var i = 0; i < uls.length; i++) {
                var ul = uls[i];
                ul.style.transition = "transform .5s linear " + (i * 0.2) + "s";
                ul.style.transform = "rotateX(" + de + "deg)";
            }
        }

        btnr.onclick = function () {
            if (ad) {
                return;
            }
            ad = true;
            de -= 90;
            for (var i = 0; i < uls.length; i++) {
                var ul = uls[i];
                ul.style.transition = "transform .5s linear " + (i * 0.2) + "s";
                ul.style.transform = "rotateX(" + de + "deg)";
            }
        }
        document.querySelector("ul:last-child").addEventListener("transitionend", function () {
            ad = false;
        })




    </script>

</body>

</html>